<template>
  <div class="car p-15 pt-0">
    <!-- 钱包地址 -->
    <div class="mb-15">
      <account-comp></account-comp>
    </div>

    <!-- Tabs -->
    <van-tabs shrink swipeable @change="getOrderList" v-model:active="tabIndex">
      <van-tab v-for="(v, i) in tabs" :key="i" :title="v.name"></van-tab>
    </van-tabs>

    <!-- 订单列表 -->
    <ul v-if="orders.length">
      <li class="box mt-15" v-for="(v, i) in orders" :key="i">
        <div class="flex mb-10">
          <!-- 封面 -->
          <img
            class="mr-10"
            style="width: 130px; border-radius: 20px"
            :src="getImageUrl(getProduct(v.goods_id)?.image)"
          />

          <div>
            <div class="fz-16">
              {{ getProduct(v.goods_id)?.name || 'None' }}
            </div>
            <!-- <div>{{ $t('数量') }}：{{ v.num }}</div> -->
            <div>{{ $t('价值') }}：{{ v.amount }} ({{ $t('购物券') }})</div>
            <div>{{ $t('获得') }}：{{ v.amount }} ({{ $t('贡献值') }})</div>
            <div>{{ $t('状态') }}：{{ tabs[Number(v.status) - 1].name }}</div>
          </div>
        </div>

        <div class="mb-10" v-if="v.status == 1">
          {{ $t('支付时间') }}：{{ formatDateTime(v.paytime) }}
        </div>
        <div class="mb-10" v-else-if="v.status == 2">
          {{ $t('确认时间') }}：{{ formatDateTime(v.confirmtime) }}
        </div>
        <div class="mb-10" v-else-if="v.status == 3">
          {{ $t('发货时间') }}：{{ formatDateTime(v.sendtime) }}
        </div>

        <div class="flex flex-rr">
          <van-button
            type="primary"
            round
            v-if="v.status == 1"
            @click=";(currentOrder = v), (confirmVisible = true)"
          >
            {{ $t('确认订单') }}
          </van-button>
          <van-button
            type="primary"
            round
            v-else-if="v.status == 3"
            @click=";(currentOrder = v), (expressVisible = true)"
          >
            {{ $t('查看单号') }}
          </van-button>
        </div>
      </li>
    </ul>

    <van-empty :description="$t('暂无数据')" v-else></van-empty>

    <!-- 确认订单 -->
    <van-popup v-model:show="confirmVisible">
      <div class="popup">
        <!-- 商品信息 -->
        <div class="flex mb-10 box p-0">
          <!-- 封面 -->
          <img
            class="mr-10"
            style="width: 90px"
            :src="getImageUrl(getProduct(currentOrder.goods_id)?.image)"
          />

          <div class="pt-10 pb-10">
            <div class="fz-16">
              {{ getProduct(currentOrder.goods_id)?.name || 'None' }}
            </div>
            <div>
              {{ $t('价值') }}：{{ currentOrder.amount }} ({{ $t('购物券') }})
            </div>
            <div>
              {{ $t('获得') }}：{{ currentOrder.amount }} ({{ $t('贡献值') }})
            </div>
          </div>
        </div>

        <!-- 订单备注 -->
        <div class="mb-15">
          <div class="mb-10">{{ $t('订单备注') }}</div>
          <van-field
            :placeholder="$t('请输入订单备注')"
            v-model="com"
          ></van-field>
        </div>

        <!-- 收货地址 -->
        <div class="mb-15">
          <div class="cl-success click mb-10" @click="router.push('/address')">
            {{ $t('选择收货地址') }}
          </div>
          <div class="flex flex-cc mb-10">
            <div class="flex-fs-0" style="width: 60px">
              {{ $t('收货人') }}：
            </div>
            <van-field
              class="flex-1"
              readonly
              v-model="address.name"
            ></van-field>
          </div>
          <div class="flex flex-cc mb-10">
            <div class="flex-fs-0" style="width: 60px">{{ $t('电话') }}：</div>
            <van-field
              class="flex-1"
              readonly
              v-model="address.tel"
            ></van-field>
          </div>
          <div class="flex flex-cc">
            <div class="flex-fs-0" style="width: 60px">{{ $t('地址') }}：</div>
            <van-field
              class="flex-1"
              readonly
              v-model="address.address"
            ></van-field>
          </div>
        </div>

        <div class="flex flex-rc">
          <van-button
            style="width: 100px"
            type="primary"
            round
            @click="confirmOrder"
          >
            {{ $t('确定') }}
          </van-button>
        </div>
      </div>
    </van-popup>

    <!-- 查看单号 -->
    <van-popup v-model:show="expressVisible">
      <div class="popup">
        <!-- 快递单号 -->
        <div class="mb-15">
          <div class="mb-10">{{ $t('快递单号') }}</div>
          <van-field disabled v-model="currentOrder.express"></van-field>
        </div>

        <div class="flex flex-rc">
          <van-button
            style="width: 100px"
            type="primary"
            round
            @click="expressVisible = false"
          >
            {{ $t('确定') }}
          </van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { formatDateTime, showSuccess } from 'js/utils'
import mitt from 'js/mitt'
import apis from 'js/apis'

import accountComp from './account.vue'

const router = useRouter()

// Tabs
const tabs = ref([
  { name: $t('待确认'), value: 1 },
  { name: $t('待发货'), value: 2 },
  { name: $t('已发货'), value: 3 },
])
const tabIndex = ref(0)

// 商品
const products = ref([])

// 订单
const orders = ref([])
const currentOrder = ref(null)

// 确认订单表单
const address = ref(JSON.parse(localStorage.getItem('address') || '{}'))
const com = ref('')
const confirmVisible = ref(false)

// 查看单号表单
const expressVisible = ref(false)

// 选择地址
mitt.on('selectAddress', (v) => {
  address.value = v
})

getProductList()
getOrderList()

// 获取商品列表
async function getProductList() {
  const { code, data } = await apis.getProductList()

  if (code === 1) {
    products.value = data
  }
}

// 获取订单列表
async function getOrderList() {
  const params = {
    status: tabs.value[tabIndex.value].value,
  }

  const { code, data } = await apis.getOrderList(params)

  if (code === 1) {
    orders.value = data
  }
}

// 确认订单
async function confirmOrder() {
  const params = {
    id: currentOrder.value.id,
    address_id: address.value.id,
    com: com.value,
  }

  const { code } = await apis.confirmOrder(params)

  if (code === 1) {
    confirmVisible.value = false
    showSuccess($t('操作成功'))
    getOrderList()
  }
}

function getProduct(id) {
  return products.value.find((v) => v.id === id)
}

function getImageUrl(url = '') {
  return (import.meta.env.VITE_API_URL_SHOP || '') + url
}
</script>

<style lang="scss" scoped></style>
